<script setup lang="ts">
import {ref} from "vue";

const dynamicId = ref('btn_id')
const dynamicId1 = ref(null)
const dynamicId2 = ref(undefined)
const dynamicId3 = ref('btn_simple')

const id = ref('btn_id')
const isButtonDisabled = ref(true)
</script>

<template>
  <div>
    <h1>Attribute 绑定</h1>
    <p>
      双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：<br/>
      v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。<br/>
      如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。<br/>
    </p>
    <div v-bind:id="dynamicId">这里是动态 id</div>
    <div v-bind:id="dynamicId1">这里是动态 id1</div>
    <div v-bind:id="dynamicId2">这里是动态 id2</div>
    <div :id="dynamicId3">这里是动态 id3，绑定的时候使用了简写语法</div>
    <div>
      <p>
        开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持
        Vue 的浏览器都能正确解析它。<br/>
        此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它。
      </p>
    </div>
    <div>
      <h2>同名简写：</h2>
      <!-- 与 :id="id" 相同 -->
      <div :id>如果 attribute 的名称与绑定的 JavaScript 值的名称相同，那么可以进一步简化语法，省略 attribute 值</div>
      <!-- 与 v-bind:id="id" 相同 -->
      <div v-bind:id>如果 attribute 的名称与绑定的 JavaScript 值的名称相同，那么可以进一步简化语法，省略 attribute 值
      </div>
    </div>
    <div>
      <h2>布尔型 Attribute</h2>
      <button :disabled="isButtonDisabled">Button</button>
      <p>
        当 isButtonDisabled 为真值或一个空字符串时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。
      </p>
    </div>
  </div>
</template>

<style scoped>

</style>